<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <br />
    <p>爱好好比骑马和学法语，如果不沉年轻时学会，以后想学会就难了</p>
    <p>
      Love is like riding or speaking French,if you do not learn it young,it's
      hard to get the trick of it later
    </p>
    <div class="login-box" v-if="userInfo.id">
      <span>{{ userInfo.username }} &nbsp; | </span>
      <el-link type="primary">&nbsp; 退出登录</el-link>
    </div>
    <div class="login-box" v-else>
      <el-link type="primary" @click.prevent="dialogRegisterVisible = true"
        >注册 |
      </el-link>
      <el-link type="primary" @click.prevent="dialogLoginVisible = true">
        登录</el-link
      >
    </div>
    <div class="content" v-for="cont of contents" :key="cont.id">
      <div class="title">
        <span>{{ cont.title }}</span>
        <span>{{ cont.created_at }}</span>
      </div>
      <p class="cont">{{ cont.content }}</p>
      <div class="bottom">
        <span @click="like(cont.id)">赞（{{ cont.like_count }}）</span>
        <span>回复（{{ cont.comment_count }}）</span>
        <el-link type="primary"> 我要回复</el-link>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :current-page.sync="page"
      :page-size.sync="perpage"
      @current-change="pageChange"
      :total="count"
    >
    </el-pagination>
    <!-- 登录弹框 -->
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      center
      title="登录"
      :visible.sync="dialogLoginVisible"
    >
      <el-form :model="loginForm" label-width="60px" size="mini">
        <el-form-item label="用户名">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密 码">
          <el-input v-model="loginForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogLoginVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="login">登 录</el-button>
        <el-link
          type="primary"
          style="float: right"
          @click="dialogRegisterVisible = true"
          >暂无账号，去注册</el-link
        >
      </div>
    </el-dialog>

    <!-- 注册弹框 -->
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      center
      title="注册"
      :visible.sync="dialogRegisterVisible"
    >
      <el-form :model="registerForm" label-width="80px" size="mini">
        <el-form-item label="用户名">
          <el-input v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密 码">
          <el-input v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="registerForm.repassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogRegisterVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="register"
          >注 册</el-button
        >
        <el-link
          type="primary"
          style="float: right"
          @click.prevent="dialogLoginVisible = true"
          >已有账号，去登录</el-link
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
// moment().format();
export default {
  name: "App",
  data() {
    return {
      contents: [],
      perpage: 2, // 每页多少条
      page: 1, // 当前页
      count: 0, // 总条数
      dialogLoginVisible: false, // 登录弹框显示
      loginForm: {}, // 登录用户的信息
      dialogRegisterVisible: false, // 注册弹框显示
      registerForm: {}, // 注册用户的信息
      userInfo: {
        id: 6,
        username: 'test'
      }
    };
  },
  methods: {
    pageChange() {
      this.getData();
    },
    getData() {
      axios({
        method: "get",
        url: "/api",
        params: {
          page: this.page,
          perpage: this.perpage,
        },
      }).then((res) => {
        let { data } = res;
        this.count = data.count - 0;
        this.contents = data.data;
        this.perpage = data.perpage - 0;
      });
    },
    register() {
      console.log(this.registerForm)
      axios({
        method: "post",
        url: "/api/register",
        data: this.registerForm
      }).then((res) => {
        let {data} = res;
        if(data.code !== 0) return this.$message.error(data.data)
        this.dialogRegisterVisible = false;
        this.dialogLoginVisible = true;
      });
    },
    login() {
      console.log(this.loginForm)
      axios({
        method: "post",
        url: "/api/login",
        data: this.loginForm
      }).then((res) => {
        let {data} = res;
        if(data.code !== 0) return this.$message.error(data.data)
        this.dialogLoginVisible = false
        this.userInfo = data.data
      });
    },
    like(id) {
      axios({
        method: "post",
        url: "/api/like",
        data: {
          content_id: id,
          uid: this.userInfo.id
        }

      }).then(res => {
        let {data} = res
        if(data.code != 0) return this.$message.error(data.data)
        this.contents.forEach(cont => {
            if(cont.id === data.data.id) {
              cont.like_count = data.data.like_count
            }
          })
      })
    }
  },
  created() {
    this.getData();
    // let arr1 = document.cookie.split('; ')
    // arr1 = arr1.map(item => {
    //   let arr2 = item.split('=')
    //   return {
    //     [arr2[0]]: arr2[1]
    //   }
    // })
    // let cookie = Object.assign({}, ...arr1)
    // this.userInfo.id = cookie.uid
    // this.userInfo.username = cookie.username
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.title {
  display: flex;
  justify-content: space-between;
  color: #ccc;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.content {
  padding: 10px 40px;
}
.cont {
  text-align: left;
  font-size: 20px;
}
.login-box {
  margin-right: 40px;
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
